<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- v-model的使用：app6 -->
		<div id="app6">
			<p>{{inputText}}</p>
			<input v-model="inputText" />
		</div>

		<!-- 组件的定义和使用：app7 -->
		<div id="app7">
			<ol>
				<todo-item v-for="dream in dreamList" v-bind:todo="dream" v-bind:key="dream.id"></todo-item>
			</ol>
		</div>

		<script type="text/javascript">
			var app6 = new Vue({
				el: "#app6",
				data: {
					inputText: '请在下方输入文字'
				}
			})

			// 定义名为 todo-item 的新组件
			Vue.component('todo-item', {
				// 该组件接收一个props，名叫"todo"
				// 类似于一个自定义的属性
				props: ['todo'],
				template: '<li>{{ todo.text }}</li>'
			})

			var app7 = new Vue({
				el: "#app7",
				data: {
					dreamList: [{
							id: 1,
							text: '腾讯'
						},
						{
							id: 2,
							text: '阿里'
						},
						{
							id: 3,
							text: '华为'
						},
						{
							id: 4,
							text: '小米'
						}
					]
				}
			})
		</script>
	</body>
</html>
